<template>
  <view class="content">
    <view class="title">
      <!-- 年月在同一行 -->
      <text class="year">{{journalData.year}}年</text>
      <text class="month">{{journalData.month}}</text>

      <!-- day独占一行 -->
      <text class="day">{{journalData.day}}</text>

      <!-- week和time在同一行 -->
      <text class="week">{{journalData.week}}</text>
      <text class="time">{{journalData.time}}</text>
    </view>
	<view class="htmlContent ">
		
		<rich-text 
			:nodes="journalData.journalContent"
			space
			selectable="true"
			preview="true"
			class="richContent"
		>
		</rich-text>
	</view> 
	<view class="number">
		<text>175字</text>
	</view>
	<view class="bottom">
		<view class="delete" @click="deleteById()">
			<uni-icons type="trash-filled" size="25" color="white"></uni-icons>
		</view>
		<view class="edit" @click="editById()">
			<uni-icons type="compose" size="25" color="white"></uni-icons>
		</view>
		<view class="share" @click="shareById()">
			<uni-icons type="shop-filled" size="25" color="white"></uni-icons>
		</view>
		<view class="download" @click="downloadById()">
			<uni-icons type="download-filled" size="25" color="white"></uni-icons>
		</view>
	</view>
		<view class="deletePopup">
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" >
				<view class="one popup-content">你确定要删除这篇日记吗？此操作不可逆</view>
				<view class="two popup-content" @click="toDelete">确定</view>
				<view class="three popup-content" @click="cancel">取消</view>
			</uni-popup>
		</view>
  </view>
</template>

<script>
	import {getJournalDetail,deleteById} from '@/api/journal.js';
export default {

	props: {
			id: {
				default: "1"
			},
		},
		
  data() {
    return {
		journalData:{
			year:"2023",
			month:"6",
			day:"18",
			week:"星期五",
			time:"15:22",
			journalContent:""
		},
		journalId:this.id,
		authorId:"",
		token:""
		
	};
  },
  mounted(){
	this.authorId=uni.getStorageSync("id"),
	this.token=uni.getStorageSync("authorization")
	console.log(this.journalId);
	getJournalDetail({
		"id":this.journalId,
		"token":uni.getStorageSync("authorization")
	}).then(res=>{
		this.journalData = res.data.data
		console.log(this.journalData)
	})
	
  },
  
  methods:{
	toggle() {
	  		this.$refs.popup.open("bottom")
	},
	  deleteById(){
		this.toggle();
	  },
	  shareById(){
		uni.navigateTo({
			url:"/pages/treeHold/deliverHold?journalId="+this.journalId+"&content="+this.journalData.journalContent+"&number="+this.journalData.number+"&title="+this.journalData.title
		})
	  	console.log("分享")
	  },
	  downloadById(){
		  uni.navigateTo({
		  	url:"/pages/index/ShareImg?journalId="+this.journalId
		  })
	  	console.log("下载")
	  },
	  editById(){
	  	console.log("编辑")
		this.toUpdate()
	  },
	  toUpdate(){
		  uni.navigateTo({
		  	url:"/pages/editor/editor?journalId="+this.journalId
		  })
	  },
	  cancel(){
		  this.$refs.popup.close();
	  },
	  toDelete(){
		  this.delete()
		  console.log(this.id)
	  },
	  delete(){
		  deleteById({
		  	"id":this.journalId,
			"token":this.token
		  }).then(res=>{
			if(res.data.data==1){
				uni.redirectTo({
					url:"/pages/index/index"
				})
			}
		  })
	  }
  }
};
</script>

<style lang="scss">
.content {
	display: flex;
	flex-direction: column;
	background: white;
	width: 90vw;
	height: 90vh;
	border-radius: 60rpx;
	text-align: center;
	margin: auto;
	.htmlContent{
		height:69%;
		width: 100%;
		overflow-x: auto
		
	}
	.number{
		font-size: 2vh;
		color: white;
		text-align: left;
		padding-left: 40rpx;
	}
  .title {
    width: 100%;
    height: 22%;
    background-color: $font-blue;
    border-radius: 60rpx 60rpx 0 0;
	padding-top: 10rpx;
	
	.year,
	.month{
		font-size: 2vh;
	}
	
	.day{
		display: flex;
		flex-direction: column;
		font-size: 8vh;
	}
	
	.week,
	.time{
		font-size: 2vh;
	}
	
    .year,
    .month,
    .day,
    .week,
    .time {
      color: white;
   
    }

	
  }
  .bottom{
		position: flex;
		height: 80rpx;
		border-radius: 0 0 60rpx 60rpx;
		width: 100%;
		background-color: $font-blue;
		display: flex; // 添加这一行来使.bottom成为一个flex容器
		justify-content: flex-end; // 添加这一行来使元素分布在行的两侧
		align-items: center;
		margin-top: auto;
		
		.edit,
		.share,
		.download{
			margin-right: 30rpx;
		}
		
		.delete {
			margin-left: 30rpx;
		    margin-right: auto; // 将delete元素与右侧元素之间添加自动边距
		}
	}
	.deletePopup{
		.popup-content{
			width: 100%;
			height: 5vh;
			line-height: 5vh;
		}
		.one{
			height: 4vh;
			line-height: 4vh;
			font-size: 1.5vh;
			border-bottom: 1rpx gray solid;
		}
		.two{
			height: 6vh;
			line-height: 6vh;
			color: red;
			border-bottom: 1.2vh gainsboro solid;
			font-size: 2vh;
		}
		.three:active{
			background-color: $bg-gary;
		}
		.two:active{
			background-color: $bg-gary;
		}
	}
}
</style>
